<template>
	<view class="container">
		<view v-if="list.length>0" v-for="item in list"  :key="item.id" class="cell">
			
			<view class="orderid">
				<view class="item">订单：{{item.id}} <text @click="copyClipBoard(item.id)" class="copy">复制订单</text>
				
				</view>
			</view>
			<view class="body">
			<view class="cell-left" @click="goActivity(item.activityId)">
				<img mode="aspectFit"   :src="baseUrl + item.activityPic" alt="">
			</view>
			<view class="cell-right">
				<view class="cell-right-one">
					{{item.workTitle}}
				</view>
				<view class="cell-right-one">
					{{item.mobile}} - {{item.playName}}
				</view>
				<view v-if="false" class="cell-right-one2">
					
				</view>
				<view class="cell-right-one3">
					{{item.createTime}}
				</view>
			</view>
			 
			 
			 <view v-if="item.orderPayStatus!=16">
				<view @click="onToApply(item)" v-if="item.orderPayStatus != 0 && item.flowStatus==0"  class="btn"  >
					{{statusObj[item.flowStatus]}}
				</view>
				<view @click="onToApply(item)" v-if="item.orderPayStatus != 0 && item.flowStatus==4"  class="btnPost"  >
					{{statusObj[item.flowStatus]}}
				</view>
				<view @click="onToApply(item)" v-if="item.orderPayStatus != 0 && item.flowStatus==8"  class="btnAudit"  >
					{{statusObj[item.flowStatus]}}
				</view>
				<view @click="onToApply(item)" v-if="item.orderPayStatus != 0 && item.flowStatus>8 && item.flowStatus<64"  class="btnOther"  >
					{{statusObj[item.flowStatus]}}
				</view>
				<view @click="onToApply(item)" v-if="item.orderPayStatus != 0 &&  item.flowStatus==64"  class="btnRefund"  >
					{{statusObj[item.flowStatus]}}
				</view>			
			</view>
			
			<view v-if="item.orderPayStatus == 0"  @click="onPay(item)" class="btn2">
				{{payObj[item.orderPayStatus]}}
			</view>
			<view class="pay">
				<view :class=" item.orderPayStatus == 0? 'pay-txt2' : 'pay-txt'">
					{{item.orderPayStatus == 0 ? '￥' + item.orderPayAmount : payObj[item.orderPayStatus]  }}
				</view>
				
			</view>		
		</view>	
		</view>
		<view  v-if="list.length==0" >
			<u-empty
			        text='你还没有订单'
			        mode="order"
			        icon="http://cdn.uviewui.com/uview/empty/car.png"
			>
			</u-empty>

		</view>
	</view>
</template>

<script>
	import { orderQuery, createOrder } from './indexServ.js'
	export default {
		name: 'template',
		data() {
			return{
				baseUrl: getApp().globalData.envParam.baseURL,
				list: [],
				statusObj: {
					0: '提交作品',
					4: '评审中',
					8: '查看结果',
					16: '查看物流',
				},
				payObj: {
					0: '待支付',
					1: '已支付',
					16: '已退款',
				},
				params: {
				  "isAsc": "desc",
				  "openId": uni.getStorageSync('openid'),
				  "orderByColumn": "createTime",
				  "pageNum": 0,
				  "pageSize": 100
				}
			}
		},
		onLoad() {
		},
		onShow() {
			this.POST_orderQuery()
		},
		methods: {
			onPay(it) {
				console.log('---onPay---')
				console.log(it)
				this.POST_createOrder(it)
			},
			onToApply(it) {
				console.log('-----onToApply--')
				uni.navigateTo({
					url:'/pages/apply/index?orderId=' + it.id + '&activityId='+ it.activityId
				})
			},
			
			copyClipBoard(id){
				 
				uni.setClipboardData({
				  data: id,
				  success: function() {
					uni.showToast({
						title:'复制成功'
					})  
				    console.log('复制成功');
				  }
				})
			},
			goActivity(id){
				console.log('choose id=',id)
				uni.navigateTo({
					url:'/pages/detail/index?activityId='+id
				})
			},
			async POST_orderQuery() {
				
				let res = await orderQuery(this.params)
				if(res.code == 200) {
					console.log('order-list',this.list)
					this.list = res.data.rows
				}
			},
			
			async POST_createOrder(it) {
				
				let p = {
					outTradeNo: it.id,
					totalFee: it.orderPayAmount * 100,
					body: it.workTitle,
					openid: it.openId,
					appid: 'wxa83fda3b97adf7ae',
					spbillCreateIp:'112.74.87.135',
					tradeType:"JSAPI",
					mchId:1655059647,
				}
				let res = await createOrder(p)
				uni.hideLoading()
				if(res) {
					uni.requestPayment({
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.packageValue,
						signType: 'MD5',
						paySign: res.paySign,
						success: event => {
							uni.showToast({
								title: `支付成功`,
								icon: 'none'
							})
							this.POST_orderQuery()
						},
						  fail: error => {
							  // uni.showToast({
							  // 	title: `支付失败`,
							  // 	icon: 'none'
							  // })
							console.log("支付失败")
							console.log(error)
							
						  },
					})
				}
			},
		}
	}
</script>
<style  lang="scss" scoped>
	.container{
		padding: 20rpx;
		box-sizing: border-box;
	}

	.cell{
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		margin-bottom: 40rpx;
		padding: 30rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		position: relative;
		min-height:320rpx;
		.orderid{
		  width: 100%;
		  display: flex;
		  flex-direction: column;
		  justify-content: flex-start;
		  .item{
			width: 100%;
			height: 70rpx;  
			.copy{
				position: absolute;
				right: 10rpx;
			}
		  }
		}
		.body{
			display: flex;
			flex-direction: row;
		}
		.btn{
			// width: 200rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			height: 60rpx;
		    background: #5ac725;
			color: #fff;
			position: absolute;
			border: 1rpx solid #5ac725;
			right: 0rpx;
			bottom: 8rpx;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			justify-content: center;
		}
		.btnPost{
			// width: 200rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			height: 60rpx;
		    background: #909399;
			color: #fff;
			position: absolute;
			border: 1rpx solid #909399;
			right: 0rpx;
			bottom: 8rpx;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			justify-content: center;
		}
		.btnAudit{
			// width: 200rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			height: 60rpx;
		    background: #f9ae3d;
			color: #fff;
			position: absolute;
			border: 1rpx solid #f9ae3d;
			right: 0rpx;
			bottom: 8rpx;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			justify-content: center;
		}
		.btnOther{
			// width: 200rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			height: 60rpx;
		    background: #3c9cff;
			color: #fff;
			position: absolute;
			border: 1rpx solid #3c9cff;
			right: 0rpx;
			bottom: 8rpx;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			justify-content: center;
		}
		.btnRefund{
			// width: 200rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			height: 60rpx;
		    background: #c7c9ce;
			color: #fff;
			position: absolute;
			border: 1rpx solid #c7c9ce;
			right: 0rpx;
			bottom: 8rpx;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			justify-content: center;
		}
		.btn2{
			// width: 200rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			height: 60rpx;
			color: #fff;
		    background: #f56c6c;
			position: absolute;
			border: 1rpx solid #f56c6c;
			right: 0rpx;
			bottom: 8rpx;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			justify-content: center;
		}
		.pay{
			left: 30rpx;
			bottom: 8rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			position: absolute;
			.pay-txt{
				font-size: 26rpx;
				margin-right: 20rpx;
				color: #dadada;
				// color: #f4f4f4;
			}
			.pay-txt2{
				margin-top: 20rpx;
				font-size: 26rpx;
				margin-right: 20rpx;
				color: red;
			}
			
		}

		.cell-left{
			width: 140rpx;
			height: 200rpx;
			// background: pink;
			margin-right: 20rpx;
			margin-top: -40rpx;
			img {
				width: 140rpx;
				height: 200rpx;
			}
		}
		.cell-right{
			display: flex;
			flex-direction: column;
			.cell-right-one{
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}
			.cell-right-one2{
				font-size: 26rpx;
				margin-bottom: 15rpx;
			}
			.cell-right-one3{
				font-size: 26rpx;
				margin-bottom: 15rpx;
			}
		}
	}
	
</style>